<template>
  <el-upload
    class="upload-demo"
    ref="upload"
    action="http://localhost:3000/api/positions/upload"
    :on-remove="handleRemove"
    :auto-upload="false"
    name="companyLogo"
    :on-success="handleSuccess"
    :file-list="fileList"
    :on-change="handleChange"
    list-type="picture"
    :limit="1"
  >
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
export default {
  props: ['file-name'],
  data() {
    return {
      fileList: []
    }
  },

  mounted() {
    
  },

  watch: {
    fileName(value) {
      this.fileList = [{
        name: value, 
        url: `http://localhost:3000/uploads/${value}`
      }]
    }
  },

  methods: {
    handleRemove() {
      console.log('removed')
    },

    submitUpload() {
      this.$refs.upload.submit()
    },

    handleSuccess(result) {
      // console.log(result)
      this.$emit('update:uploded-succ', result)
    },

    handleChange() {
      this.$emit('update:is-change', true)
    }
  },
}
</script>

<style lang='stylus' scoped>

</style>